<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #canvas{display: block; background-color: #333;}
    </style>
</head>
<body>
<canvas id="canvas" width="1349px" height="638px"></canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById('canvas');
        var oc = canvas.getContext('2d');
        var daX = 650,daY = 290,daR = 15;
        var xiaoX = 0,xiaoY = 0,xiaoR = 5,xiaoColor = '';
        var color=['#9B258B','#2E3192','#2E3192','#14B04D','#FFE200','#F78F1E','#ED1B24','#e2b17f','#00FF33','#FF4400'];
        var zhuan = Math.PI/180;
        var timerD = timerX = timerS = timerSa = null;
        var D = {37: {x: -5, y: 0}, 38: {x: 0, y: -5}, 39: {x: 5, y: 0}, 40: {x: 0, y: 5}, 32: {x: 0, y: 0}};
        var place = [],gameOver = 0,caiNum = 0;
        oc.save();
        oc.fillStyle = 'white';
        oc.font = '20px impact';
        oc.textBaseline = 'top';
        oc.fillText('按←→↑↓移动小白球',50,30);
        oc.fillText('空格停止移动',50,57);
        oc.restore();
        function drawda() {
            oc.beginPath();
            oc.fillStyle = 'white';
            oc.arc(daX,daY,daR,0,360*zhuan,false);
            oc.closePath();
            oc.fill();
        }
        drawda();
        function clear() {
            oc.clearRect(0,0,canvas.width,canvas.height);
        }
        function drawxiao() {

            for (var i=0; i<4 ;i++){
                xiaoX = random(1349);
                xiaoY = random(638);
                place.push({x: xiaoX,y:xiaoY});
                xiaoColor = color[random(10)];
                oc.beginPath();
                oc.fillStyle = xiaoColor;
                oc.arc(xiaoX,xiaoY,xiaoR,0,360*zhuan,false);
                oc.closePath();
                oc.fill();
            }
        }
        timerX = setInterval(drawxiao,2000);
        setTimeout(function () {
            oc.clearRect(0,0,230,100);
        },4000);
        function shitou() {
            var shiX = random(1349);
            var suijiX = random(500);
            var shiR = 20-Math.floor(daR/8);
            var shiY = -40;
            timerSa = setInterval(function () {
                if(shiY<1200){
                    oc.clearRect(shiX-shiR,shiY-shiR,2*shiR,2*shiR);
                    oc.clearRect(shiX+suijiX-shiR,shiY-shiR,2*shiR,2*shiR);
                    oc.clearRect(shiX+suijiX-200-shiR,shiY-shiR,2*shiR,2*shiR);
                    oc.clearRect(shiX-suijiX-shiR,shiY-shiR,2*shiR,2*shiR);
                    shiY += 10;
                    oc.beginPath();
                    oc.fillStyle = 'white';
                    oc.arc(shiX,shiY,shiR,0,360*zhuan,false);
                    oc.closePath();
                    oc.fill();

                    oc.beginPath();
                    oc.fillStyle = 'white';
                    oc.arc(shiX+suijiX,shiY,shiR,0,360*zhuan,false);
                    oc.closePath();
                    oc.fill();

                    oc.beginPath();
                    oc.fillStyle = 'white';
                    oc.arc(shiX+suijiX-200,shiY,shiR,0,360*zhuan,false);
                    oc.closePath();
                    oc.fill();

                    oc.beginPath();
                    oc.fillStyle = 'white';
                    oc.arc(shiX-suijiX,shiY,shiR,0,360*zhuan,false);
                    oc.closePath();
                    oc.fill();
                    for (var i=0;i<place.length;i++){
                        if(shiX-shiR<=place[i].x+xiaoR && shiX+shiR>=place[i].x-xiaoR && shiY-shiR<=place[i].y+xiaoR && shiY+shiR>=place[i].y-xiaoR){

                            oc.clearRect(place[i].x-xiaoR,place[i].y-xiaoR,2*xiaoR,2*xiaoR);
                            place.splice(i,1);

                        }
                        if(shiX+suijiX-shiR<=place[i].x+xiaoR && shiX+suijiX+shiR>=place[i].x-xiaoR && shiY-shiR<=place[i].y+xiaoR && shiY+shiR>=place[i].y-xiaoR){

                            oc.clearRect(place[i].x-xiaoR,place[i].y-xiaoR,2*xiaoR,2*xiaoR);
                            place.splice(i,1);

                        }
                        if(shiX+suijiX-200-shiR<=place[i].x+xiaoR && shiX+suijiX-200+shiR>=place[i].x-xiaoR && shiY-shiR<=place[i].y+xiaoR && shiY+shiR>=place[i].y-xiaoR){

                            oc.clearRect(place[i].x-xiaoR,place[i].y-xiaoR,2*xiaoR,2*xiaoR);
                            place.splice(i,1);

                        }
                        if(shiX-suijiX-shiR<=place[i].x+xiaoR && shiX-suijiX+shiR>=place[i].x-xiaoR && shiY-shiR<=place[i].y+xiaoR && shiY+shiR>=place[i].y-xiaoR){

                            oc.clearRect(place[i].x-xiaoR,place[i].y-xiaoR,2*xiaoR,2*xiaoR);
                            place.splice(i,1);

                        }
                    }
                    if(shiX-shiR<=daX+daR && shiX+shiR>=daX-daR && shiY-shiR<=daY+daR && shiY+shiR>=daY-daR){
                        clearclear();
                    }
                    if(shiX+suijiX-shiR<=daX+daR && shiX+suijiX+shiR>=daX-daR && shiY-shiR<=daY+daR && shiY+shiR>=daY-daR){
                        clearclear();
                    }
                    if(shiX+suijiX-200-shiR<=daX+daR && shiX+suijiX-200+shiR>=daX-daR && shiY-shiR<=daY+daR && shiY+shiR>=daY-daR){
                        clearclear();
                    }
                    if(shiX-suijiX-shiR<=daX+daR && shiX-suijiX+shiR>=daX-daR && shiY-shiR<=daY+daR && shiY+shiR>=daY-daR){
                        clearclear();
                    }
                }else{
                    clearInterval(timerSa);
                    oc.clearRect(shiX-shiR,shiY-shiR,2*shiR,2*shiR);
                    oc.clearRect(shiX+suijiX-shiR,shiY-shiR,2*shiR,2*shiR);
                    oc.clearRect(shiX+suijiX-200-shiR,shiY-shiR,2*shiR,2*shiR);
                    oc.clearRect(shiX-suijiX-shiR,shiY-shiR,2*shiR,2*shiR);
                    shiY = -40;
                }
            },30)
        }
        timerS = setInterval(shitou,4000);

        function clearclear() {
            if(localStorage.getItem('chengji')){
                if(caiNum>localStorage.getItem('chengji')){
                    localStorage.setItem('chengji',caiNum);
                }
            }
            else {
                localStorage.setItem('chengji',caiNum);
            }
            oc.clearRect(0,0,canvas.width,canvas.height);
            clearInterval(timerD);
            clearInterval(timerX);
            clearInterval(timerS);
            clearInterval(timerSa);
            oc.save();
            oc.fillStyle = 'white';
            oc.font = '80px impact';
            oc.textBaseline = 'top';
            oc.fillText('Game   Over',507,265);
            oc.restore();
            gameOver = 1;
            setTimeout(chengji,1000)
        }
        function chengji() {
            oc.clearRect(0,0,canvas.width,canvas.height);
            oc.save();
            oc.fillStyle = 'white';
            oc.font = '50px impact';
            oc.textBaseline = 'top';
            oc.fillText('您的本轮成绩为：'+caiNum,435,296);
            if(localStorage.getItem('chengji')){
                oc.fillText('历史最高：',535,151);
                oc.fillStyle = 'rgba(255,215,0,100)';
                oc.fillText(localStorage.getItem('chengji'),784,150);
            }else {
                oc.fillText('历史最高：0',535,151);
            }
            oc.restore();
        }
        function random(x) {

            var random = Math.floor(Math.random()*x);
            return random;

        }
        window.addEventListener('keydown', function (e) {

            var e= e || event;
            clearInterval(timerD);
            if(gameOver == 0){
                if (D[e.which]){
                    timerD = setInterval(function () {
                        oc.clearRect(daX-daR,daY-daR,2*daR,2*daR);
                        daX += D[e.which].x;
                        daY += D[e.which].y;
                        drawda();

                        oc.clearRect(1200,25,100,50);
                        oc.save();
                        oc.fillStyle = 'yellow';
                        oc.font = '10px impact';
                        oc.textBaseline = 'top';
                        oc.fillText('彩虹糖数 ： ',1200,35);
                        oc.restore();

                        oc.save();
                        oc.fillStyle = 'white';
                        oc.font = '22px impact';
                        oc.textBaseline = 'top';
                        oc.fillText(caiNum,1270,30);
                        oc.restore();
                        for (var i=0;i<place.length;i++){
                            if(daX-daR<=place[i].x+xiaoR && daX+daR>=place[i].x-xiaoR && daY-daR<=place[i].y+xiaoR && daY+daR>=place[i].y-xiaoR){

                                oc.clearRect(place[i].x-xiaoR,place[i].y-xiaoR,2*xiaoR,2*xiaoR);
                                daR+=1;
                                caiNum++;
                                place.splice(i,1);

                            }
                        }
                    },30)
                }else {
                    return false;
                }
            }else if(gameOver == 1){
                    return false;
            }
        });
    }
</script>
</body>
</html>